<style scoped>

.item-header {
  border-bottom: 2px solid #f0f0f0;
  padding: 20px 0;
}
.item-header-btn1 {
  margin-left: auto;
}
/* item-body */
.item-body {
  padding: 20px 0;
  position: relative;
}
.item-body-btn2 {
  margin-left: 20px;
  color: #000;
  border: 1px solid #f0f0f0;
  background-color: #f0f0f0;
}
.item-body-btn2-active {
  padding: 15px 20px;
  position: relative;
  top: 5px;
}
.transform180 {
  transform: rotate(180deg);
}

.item-body-item {
  background-color: #f0f0f0;
  width: 100%;
  padding: 20px 20% 20px 10%;
  min-height: 200px;
  margin-top: 5px;
}
.item-body-item .el-form-item:nth-child(even) {
  margin-left: 5%;
}
.el-date-picker {
  margin-left: 5%;
}
.el-select,
.el-input {
  width: 400px;
}
.btn-keyword {
  align-self: flex-end;
}

/* title */
.title {
  position: relative;
  margin: 50px 0 100px 0;
}
.title-switch {
  background-color: #409eff;
  margin-right: 50px;
  color: #fff;
  padding: 4px 8px;
  border-radius: 5px;
}
.title-switch-text {
  margin-left: 5px;
}
.el-icon-date,.el-icon-tickets {
  font-size: 35px;
}

.title-today {
  margin-left: 50px;
}
.title-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.title-time-h3 {
  margin: 0 20px;
}
.title-time-left,
.title-time-right{
  font-size: 25px;
}

</style>


<template>
  <div v-show="show" class="wrap">
    <!-- header -->
    <div class="item-header flex align-center">
      <h5>领导行程</h5>
      <el-button type="primary" plain class="item-header-btn1">打印</el-button>
      <el-button type="primary" plain class="item-header-btn2">导出</el-button>
    </div>
    <!-- body -->
    <div class="item-body">
      <div class="item-body-btnGroup">
        <el-button @click="createSchedule" type="primary">创建行程</el-button>
        <el-button @click="filterSchedult" class="item-body-btn2" type="info">
          行程过滤
          <i class="el-icon-arrow-up" :class="{transform180:!filterShow}"></i>
        </el-button>
      </div>
      <div
        v-show="filterShow"
        :class="{'item-body-btn2-active':!filterShow}"
        class="item-body-item"
      >
        <el-form ref="form" :model="form" class="flex flex-wrap" label-width="80px">
          <el-form-item label="领导名称">
            <el-select v-model="form.leader" placeholder="请选择领导名称">
              <el-option label="李强" value="shanghai"></el-option>
              <el-option label="王兵" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型">
            <el-select v-model="form.business" placeholder="请选择业务类型">
              <el-option label="业务类型1" value="业务类型1"></el-option>
              <el-option label="业务类型2" value="业务类型2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行程类别">
            <el-select v-model="form.schedule" placeholder="请选择行程类别">
              <el-option label="行程类别1" value="行程类别1"></el-option>
              <el-option label="行程类别2" value="行程类别2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="领导名称">
            <el-select v-model="form.region" placeholder="请选择领导名称">
              <el-option label="李强" value="shanghai"></el-option>
              <el-option label="王兵" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="领导名称">
            <el-select v-model="form.region" placeholder="请选择领导名称">
              <el-option label="李强" value="shanghai"></el-option>
              <el-option label="王兵" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <!-- time -->
          <el-form-item label="选择时间">
            <el-date-picker
              v-model="value7"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00', '08:00:00']"
            ></el-date-picker>
          </el-form-item>
          <!-- 关键词 -->
          <el-form-item label="关键词">
            <el-input v-model="form.keyword"></el-input>
          </el-form-item>
        </el-form>
        <el-button class="btn-keyword" type="primary">过滤</el-button>
      </div>
    </div>
    <!-- title -->
    <div class="title flex align-center justify-center">
      <div class="title-time flex align-center">
        <i class="hand title-time-left el-icon-arrow-left"></i>
        <h3 class="title-time-h3">2018年12月23日</h3>
        <i class="hand title-time-right el-icon-arrow-right"></i>
      </div>
      <el-button class="title-today" type="primary">今天</el-button>
      <div class="title-right flex align-center">
        <div @click="switchList">
          <router-link v-show="listTrue" :to="{name:'leadMonth'}">
            <div class="title-switch hand flex align-center">
              <i class="el-icon-date"></i>
              <span class="flex title-switch-text">切换日历模式</span>
            </div>
          </router-link>
          <router-link v-show="!listTrue" :to="{name:'leadList'}">
            <div class="title-switch hand flex align-center">
              <i class="el-icon-tickets"></i>
              <span class="flex title-switch-text">切换列表模式</span>
            </div>
          </router-link>
        </div>
        <el-button-group>
          <el-button type="primary">日</el-button>
          <el-button type="primary">周</el-button>
          <el-button type="primary">月</el-button>
        </el-button-group>
      </div>
    </div>

    <!-- main -->
    <div class="main">
       <router-view></router-view>
    </div>
  </div>
</template>


<script>
export default {
  name: "comLead",

  componentName: "comLead",

  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      listTrue:true,
      filterShow: false,
      value7: "",
      form: {
        leader: "",
        business: "",
        schedule: "",
        region: "",
        keyword: ""
      }
      
    };
  },
  methods: {
    createSchedule() {
      this.$router.push({
        name: "createSchedule"
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    filterSchedult() {
      this.filterShow = !this.filterShow;
    },
    switchList(){
      this.listTrue = !this.listTrue;
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  }
};
</script>
